<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统性能监控面板</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="./common-styles.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: {
                            100: '#F5F5F5',
                            200: '#E5E5E5',
                            300: '#D4D4D4',
                            400: '#A3A3A3',
                            500: '#737373',
                            600: '#525252',
                            700: '#404040',
                            800: '#262626',
                            900: '#171717',
                        },
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        info: '#1890FF',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    }
                },
            }
        }
    </script>
</head>

<body class="font-inter bg-neutral-100 text-neutral-800 min-h-screen flex flex-col">
    <!-- 统一导航菜单 -->
<nav class="bg-white border-b border-neutral-200 sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <div class="flex-shrink-0 flex items-center">
                    <i class="fa fa-cube text-primary text-xl mr-2"></i>
                    <span class="font-medium text-lg">智能运维平台</span>
                </div>
                <div class="hidden sm:ml-6 sm:flex sm:space-x-6">
                    <a href="多模态.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-line-chart mr-1"></i> 多模态评估
                    </a>
                    <a href="聊天助手.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-comment mr-1"></i> 聊天助手
                    </a>
                    <a href="使用率.html" class="border-primary text-primary inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-microchip mr-1"></i> 性能监控
                    </a>
                    <a href="ai.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-bug mr-1"></i> 故障诊断
                    </a>
                    <a href="os运维场景.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-server mr-1"></i> 运维场景
                    </a>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <a href="登录.html" class="text-neutral-500 hover:text-neutral-700 inline-flex items-center px-1 py-1 text-sm font-medium">
                    <i class="fa fa-sign-in mr-1"></i> 登录
                </a>
                <a href="注册.html" class="text-neutral-500 hover:text-neutral-700 inline-flex items-center px-1 py-1 text-sm font-medium">
                    <i class="fa fa-user-plus mr-1"></i> 注册
                </a>
                <div class="relative">
                    <button type="button" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="user-menu-button">
                        <img class="h-8 w-8 rounded-full object-cover" src="https://i.pravatar.cc/150?img=33" alt="用户头像">
                    </button>
                </div>
                <button type="button" class="p-2 rounded-full text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 focus:outline-none">
                    <i class="fa fa-cog"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 移动端菜单 -->
    <div class="sm:hidden">
        <div class="pt-2 pb-3 space-y-1">
            <a href="登录.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-sign-in mr-1"></i> 登录
            </a>
            <a href="注册.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-user-plus mr-1"></i> 注册
            </a>
            <a href="多模态.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-line-chart mr-1"></i> 多模态评估
            </a>
            <a href="聊天助手.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-comment mr-1"></i> 聊天助手
            </a>
            <a href="使用率.html" class="bg-primary text-white block pl-3 pr-4 py-2 border-l-4 border-primary text-base font-medium">
                <i class="fa fa-microchip mr-1"></i> 性能监控
            </a>
            <a href="ai.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-bug mr-1"></i> 故障诊断
            </a>
            <a href="os运维场景.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-server mr-1"></i> 运维场景
            </a>
        </div>
    </div>
</nav>

    <!-- 主内容区域 -->
    <main class="flex-grow">
        <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
            <!-- 概览卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                <div
                    class="bg-white rounded-lg shadow-card p-6 transform transition-all duration-300 hover:shadow-hover hover:-translate-y-1">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-sm font-semibold text-neutral-600">CPU 利用率</h3>
                        <span
                            class="text-xs font-medium bg-primary/10 text-primary px-2.5 py-0.5 rounded-full">实时</span>
                    </div>
                    <div class="flex items-center">
                        <div class="relative w-24 h-24">
                            <canvas id="cpuChart"></canvas>
                        </div>
                        <div class="ml-4">
                            <p class="text-3xl font-semibold text-neutral-800">22%</p>
                            <p class="text-sm text-neutral-500">3.17 GHz / 3.80 GHz</p>
                        </div>
                    </div>
                </div>

                <div
                    class="bg-white rounded-lg shadow-card p-6 transform transition-all duration-300 hover:shadow-hover hover:-translate-y-1">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-sm font-semibold text-neutral-600">内存使用</h3>
                        <span
                            class="text-xs font-medium bg-primary/10 text-primary px-2.5 py-0.5 rounded-full">实时</span>
                    </div>
                    <div class="flex items-center">
                        <div class="relative w-24 h-24">
                            <canvas id="memoryChart"></canvas>
                        </div>
                        <div class="ml-4">
                            <p class="text-3xl font-semibold text-neutral-800">61%</p>
                            <p class="text-sm text-neutral-500">9.2 / 15.2 GB</p>
                        </div>
                    </div>
                </div>

                <div
                    class="bg-white rounded-lg shadow-card p-6 transform transition-all duration-300 hover:shadow-hover hover:-translate-y-1">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-sm font-semibold text-neutral-600">磁盘空间</h3>
                        <span
                            class="text-xs font-medium bg-primary/10 text-primary px-2.5 py-0.5 rounded-full">平均</span>
                    </div>
                    <div class="flex items-center">
                        <div class="relative w-24 h-24">
                            <canvas id="diskChart"></canvas>
                        </div>
                        <div class="ml-4">
                            <p class="text-3xl font-semibold text-neutral-800">2%</p>
                            <p class="text-sm text-neutral-500">已使用空间</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 系统信息和图表区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 左侧列表 -->
                <div class="lg:col-span-1 space-y-6">
                    <!-- CPU信息卡片 -->
                    <div class="bg-white rounded-lg shadow-card p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-lg font-semibold text-neutral-800">CPU</h2>
                            <span class="text-xs text-neutral-500">AMD Ryzen 7 7840H</span>
                        </div>
                        <div class="space-y-4">
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-neutral-600">利用率</span>
                                    <span class="text-sm font-medium text-primary">22%</span>
                                </div>
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 22%"></div>
                                </div>
                            </div>

                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-neutral-600">当前速度</span>
                                    <span class="text-sm font-medium text-neutral-800">3.17 GHz</span>
                                </div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-neutral-600">基准速度</span>
                                    <span class="text-sm font-medium text-neutral-800">3.80 GHz</span>
                                </div>
                            </div>

                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-neutral-600">插槽</span>
                                    <span class="text-sm font-medium text-neutral-800">1</span>
                                </div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-neutral-600">内核</span>
                                    <span class="text-sm font-medium text-neutral-800">8</span>
                                </div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-neutral-600">逻辑处理器</span>
                                    <span class="text-sm font-medium text-neutral-800">16</span>
                                </div>
                            </div>

                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-neutral-600">虚拟化</span>
                                    <span class="text-sm font-medium text-success">已启用</span>
                                </div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-neutral-600">L1 缓存</span>
                                    <span class="text-sm font-medium text-neutral-800">512 KB</span>
                                </div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-neutral-600">L2 缓存</span>
                                    <span class="text-sm font-medium text-neutral-800">8.0 MB</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-neutral-600">L3 缓存</span>
                                    <span class="text-sm font-medium text-neutral-800">16.0 MB</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 内存信息卡片 -->
                    <div class="bg-white rounded-lg shadow-card p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-lg font-semibold text-neutral-800">内存</h2>
                            <span class="text-xs text-neutral-500">15.2 GB 总内存</span>
                        </div>
                        <div class="space-y-4">
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-neutral-600">已使用</span>
                                    <span class="text-sm font-medium text-primary">9.2 GB</span>
                                </div>
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 61%"></div>
                                </div>
                            </div>

                            <div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-neutral-600">可用</span>
                                    <span class="text-sm font-medium text-neutral-800">6.0 GB</span>
                                </div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-neutral-600">缓存</span>
                                    <span class="text-sm font-medium text-neutral-800">2.8 GB</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-neutral-600">使用率</span>
                                    <span class="text-sm font-medium text-primary">61%</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 磁盘信息卡片 -->
                    <div class="bg-white rounded-lg shadow-card p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-lg font-semibold text-neutral-800">磁盘</h2>
                            <span class="text-xs text-neutral-500">NVMe SSD</span>
                        </div>
                        <div class="space-y-4">
                            <div>
                                <h3 class="text-sm font-medium text-neutral-800 mb-2">磁盘 0 (D: E: F: )</h3>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-neutral-600">使用率</span>
                                    <span class="text-sm font-medium text-primary">2%</span>
                                </div>
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 2%"></div>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-sm font-medium text-neutral-800 mb-2">磁盘 1 (C: )</h3>
                                <div class="flex justify-between mb-1">
                                    <span class="text-sm text-neutral-600">使用率</span>
                                    <span class="text-sm font-medium text-primary">2%</span>
                                </div>
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 2%"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 网络信息卡片 -->
                    <div class="bg-white rounded-lg shadow-card p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-lg font-semibold text-neutral-800">网络</h2>
                            <span class="text-xs text-neutral-500">连接状态</span>
                        </div>
                        <div class="space-y-4">
                            <div>
                                <h3 class="text-sm font-medium text-neutral-800 mb-2">Wi-Fi (WLAN)</h3>
                                <div class="grid grid-cols-2 gap-2">
                                    <div>
                                        <div class="flex justify-between mb-1">
                                            <span class="text-sm text-neutral-600">发送</span>
                                            <span class="text-sm font-medium text-primary">24.0 Kbps</span>
                                        </div>
                                        <div class="w-full bg-neutral-200 rounded-full h-2">
                                            <div class="bg-primary h-2 rounded-full" style="width: 40%"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="flex justify-between mb-1">
                                            <span class="text-sm text-neutral-600">接收</span>
                                            <span class="text-sm font-medium text-primary">11.0 Kbps</span>
                                        </div>
                                        <div class="w-full bg-neutral-200 rounded-full h-2">
                                            <div class="bg-primary h-2 rounded-full" style="width: 20%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-sm font-medium text-neutral-800 mb-2">以太网 (VMware)</h3>
                                <div class="grid grid-cols-2 gap-2">
                                    <div>
                                        <div class="flex justify-between mb-1">
                                            <span class="text-sm text-neutral-600">发送</span>
                                            <span class="text-sm font-medium text-neutral-500">0 Kbps</span>
                                        </div>
                                        <div class="w-full bg-neutral-200 rounded-full h-2">
                                            <div class="bg-neutral-400 h-2 rounded-full" style="width: 0%"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="flex justify-between mb-1">
                                            <span class="text-sm text-neutral-600">接收</span>
                                            <span class="text-sm font-medium text-neutral-500">0 Kbps</span>
                                        </div>
                                        <div class="w-full bg-neutral-200 rounded-full h-2">
                                            <div class="bg-neutral-400 h-2 rounded-full" style="width: 0%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧CPU详情 -->
                <div class="lg:col-span-2 space-y-6">
                    <!-- CPU利用率图表 -->
                    <div class="bg-white rounded-lg shadow-card p-6">
                        <div class="flex items-center justify-between mb-6">
                            <h2 class="text-lg font-semibold text-neutral-800">CPU 利用率历史</h2>
                            <div class="flex space-x-2">
                                <button
                                    class="px-3 py-1 text-xs font-medium bg-primary text-white rounded-md">实时</button>
                                <button
                                    class="px-3 py-1 text-xs font-medium bg-neutral-100 text-neutral-600 hover:bg-neutral-200 rounded-md">1小时</button>
                                <button
                                    class="px-3 py-1 text-xs font-medium bg-neutral-100 text-neutral-600 hover:bg-neutral-200 rounded-md">1天</button>
                            </div>
                        </div>
                        <div class="h-[300px]">
                            <canvas id="cpuUsageChart"></canvas>
                        </div>
                    </div>

                    <!-- CPU核心详情 -->
                    <div class="bg-white rounded-lg shadow-card p-6">
                        <div class="flex items-center justify-between mb-6">
                            <h2 class="text-lg font-semibold text-neutral-800">CPU 核心使用情况</h2>
                            <div class="flex items-center">
                                <span class="text-sm text-neutral-500 mr-2">更新频率:</span>
                                <select
                                    class="text-xs border border-neutral-200 rounded-md px-2 py-1 focus:outline-none focus:ring-1 focus:ring-primary">
                                    <option>1秒</option>
                                    <option>5秒</option>
                                    <option>10秒</option>
                                </select>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                            <!-- 模拟8个CPU核心的使用率 -->
                            <div class="p-3 bg-neutral-50 rounded-lg">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-neutral-800">核心 #1</span>
                                    <span class="text-sm font-medium text-primary">18%</span>
                                </div>
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 18%"></div>
                                </div>
                            </div>

                            <div class="p-3 bg-neutral-50 rounded-lg">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-neutral-800">核心 #2</span>
                                    <span class="text-sm font-medium text-primary">25%</span>
                                </div>
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 25%"></div>
                                </div>
                            </div>

                            <div class="p-3 bg-neutral-50 rounded-lg">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-neutral-800">核心 #3</span>
                                    <span class="text-sm font-medium text-primary">15%</span>
                                </div>
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 15%"></div>
                                </div>
                            </div>

                            <div class="p-3 bg-neutral-50 rounded-lg">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-neutral-800">核心 #4</span>
                                    <span class="text-sm font-medium text-primary">30%</span>
                                </div>
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 30%"></div>
                                </div>
                            </div>

                            <div class="p-3 bg-neutral-50 rounded-lg">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-neutral-800">核心 #5</span>
                                    <span class="text-sm font-medium text-primary">22%</span>
                                </div>
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 22%"></div>
                                </div>
                            </div>

                            <div class="p-3 bg-neutral-50 rounded-lg">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-neutral-800">核心 #6</span>
                                    <span class="text-sm font-medium text-primary">19%</span>
                                </div>
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 19%"></div>
                                </div>
                            </div>

                            <div class="p-3 bg-neutral-50 rounded-lg">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-neutral-800">核心 #7</span>
                                    <span class="text-sm font-medium text-primary">28%</span>
                                </div>
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 28%"></div>
                                </div>
                            </div>

                            <div class="p-3 bg-neutral-50 rounded-lg">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-neutral-800">核心 #8</span>
                                    <span class="text-sm font-medium text-primary">20%</span>
                                </div>
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div class="bg-primary h-2 rounded-full" style="width: 20%"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 系统进程信息 -->
                    <div class="bg-white rounded-lg shadow-card p-6">
                        <div class="flex items-center justify-between mb-6">
                            <h2 class="text-lg font-semibold text-neutral-800">系统进程</h2>
                            <div class="flex items-center">
                                <span class="text-sm text-neutral-500 mr-2">总计:</span>
                                <span class="text-sm font-medium text-primary">270 个进程</span>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-neutral-200">
                                <thead>
                                    <tr>
                                        <th
                                            class="px-4 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                            进程名称</th>
                                        <th
                                            class="px-4 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                            CPU</th>
                                        <th
                                            class="px-4 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                            内存</th>
                                        <th
                                            class="px-4 py-3 bg-neutral-50 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                            状态</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-neutral-200">
                                    <tr>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <i class="fa fa-microchip text-primary mr-2"></i>
                                                <span class="text-sm font-medium text-neutral-800">System Idle
                                                    Process</span>
                                            </div>
                                        </td>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <span class="text-sm text-neutral-600">78%</span>
                                        </td>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <span class="text-sm text-neutral-600">48 KB</span>
                                        </td>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <span
                                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">运行中</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <i class="fa fa-desktop text-neutral-600 mr-2"></i>
                                                <span class="text-sm font-medium text-neutral-800">explorer.exe</span>
                                            </div>
                                        </td>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <span class="text-sm text-neutral-600">2.5%</span>
                                        </td>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <span class="text-sm text-neutral-600">156 MB</span>
                                        </td>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <span
                                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">运行中</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <i class="fa fa-terminal text-neutral-600 mr-2"></i>
                                                <span class="text-sm font-medium text-neutral-800">powershell.exe</span>
                                            </div>
                                        </td>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <span class="text-sm text-neutral-600">1.2%</span>
                                        </td>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <span class="text-sm text-neutral-600">89 MB</span>
                                        </td>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <span
                                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">运行中</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <i class="fa fa-chrome text-neutral-600 mr-2"></i>
                                                <span class="text-sm font-medium text-neutral-800">chrome.exe</span>
                                            </div>
                                        </td>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <span class="text-sm text-neutral-600">12.3%</span>
                                        </td>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <span class="text-sm text-neutral-600">1.2 GB</span>
                                        </td>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            <span
                                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">运行中</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-4 text-center">
                            <button class="text-primary text-sm font-medium hover:text-primary/80">
                                查看全部进程 <i class="fa fa-chevron-right ml-1 text-xs"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 系统信息 -->
                    <div class="bg-white rounded-lg shadow-card p-6">
                        <div class="flex items-center justify-between mb-6">
                            <h2 class="text-lg font-semibold text-neutral-800">系统信息</h2>
                            <div>
                                <span class="text-sm text-neutral-500">正常运行时间:</span>
                                <span class="text-sm font-medium text-primary">0:12:24:13</span>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <h3 class="text-sm font-medium text-neutral-800 mb-2">系统</h3>
                                <div class="space-y-2">
                                    <div class="flex justify-between">
                                        <span class="text-sm text-neutral-600">操作系统</span>
                                        <span class="text-sm font-medium text-neutral-800">Windows 11 Pro</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-sm text-neutral-600">版本</span>
                                        <span class="text-sm font-medium text-neutral-800">22H2</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-sm text-neutral-600">系统类型</span>
                                        <span class="text-sm font-medium text-neutral-800">64位操作系统</span>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-sm font-medium text-neutral-800 mb-2">性能摘要</h3>
                                <div class="space-y-2">
                                    <div class="flex justify-between">
                                        <span class="text-sm text-neutral-600">进程</span>
                                        <span class="text-sm font-medium text-neutral-800">270</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-sm text-neutral-600">线程</span>
                                        <span class="text-sm font-medium text-neutral-800">4937</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-sm text-neutral-600">句柄</span>
                                        <span class="text-sm font-medium text-neutral-800">146,598</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-neutral-200 py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="text-sm text-neutral-500 mb-4 md:mb-0">
                    © 2023 系统性能监控面板 | 版本 1.0.0
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-neutral-500 hover:text-primary transition-custom">
                        <i class="fa fa-question-circle mr-1"></i> 帮助
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-custom">
                        <i class="fa fa-file-text-o mr-1"></i> 文档
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-custom">
                        <i class="fa fa-cog mr-1"></i> 设置
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 页面加载完成后初始化图表
        document.addEventListener('DOMContentLoaded', function () {
            // CPU环形图
            const cpuCtx = document.getElementById('cpuChart').getContext('2d');
            new Chart(cpuCtx, {
                type: 'doughnut',
                data: {
                    datasets: [{
                        data: [22, 78],
                        backgroundColor: [
                            '#0078D7',
                            '#F5F5F5'
                        ],
                        borderWidth: 0,
                        cutout: '70%'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            enabled: false
                        }
                    }
                }
            });

            // 内存环形图
            const memoryCtx = document.getElementById('memoryChart').getContext('2d');
            new Chart(memoryCtx, {
                type: 'doughnut',
                data: {
                    datasets: [{
                        data: [61, 39],
                        backgroundColor: [
                            '#0078D7',
                            '#F5F5F5'
                        ],
                        borderWidth: 0,
                        cutout: '70%'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            enabled: false
                        }
                    }
                }
            });

            // 磁盘环形图
            const diskCtx = document.getElementById('diskChart').getContext('2d');
            new Chart(diskCtx, {
                type: 'doughnut',
                data: {
                    datasets: [{
                        data: [2, 98],
                        backgroundColor: [
                            '#0078D7',
                            '#F5F5F5'
                        ],
                        borderWidth: 0,
                        cutout: '70%'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            enabled: false
                        }
                    }
                }
            });

            // CPU利用率历史图表
            const cpuUsageCtx = document.getElementById('cpuUsageChart').getContext('2d');
            const cpuUsageChart = new Chart(cpuUsageCtx, {
                type: 'line',
                data: {
                    labels: Array.from({ length: 60 }, (_, i) => i + 1),
                    datasets: [{
                        label: 'CPU 利用率 (%)',
                        data: generateRandomData(60, 15, 30),
                        borderColor: '#0078D7',
                        backgroundColor: 'rgba(0, 120, 215, 0.1)',
                        fill: true,
                        tension: 0.4,
                        borderWidth: 2,
                        pointRadius: 0,
                        pointHoverRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            display: true,
                            title: {
                                display: true,
                                text: '时间 (秒)'
                            },
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            display: true,
                            title: {
                                display: true,
                                text: '利用率 (%)'
                            },
                            min: 0,
                            max: 100,
                            ticks: {
                                stepSize: 20
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                            callbacks: {
                                label: function (context) {
                                    return `CPU 利用率: ${context.raw}%`;
                                }
                            }
                        }
                    },
                    interaction: {
                        mode: 'nearest',
                        axis: 'x',
                        intersect: false
                    },
                    animation: {
                        duration: 0
                    }
                }
            });

            // 模拟实时数据更新
            setInterval(() => {
                // 移除第一个数据点，添加一个新的随机数据点
                cpuUsageChart.data.datasets[0].data.shift();
                cpuUsageChart.data.datasets[0].data.push(Math.floor(Math.random() * 15) + 15);
                cpuUsageChart.update();
            }, 1000);

            // 生成随机数据
            function generateRandomData(count, min, max) {
                return Array.from({ length: count }, () => Math.floor(Math.random() * (max - min + 1)) + min);
            }
        });
    </script>
</body>

</html>